<template>
    <div class="main-msg-container">
        <div style="position: absolute; height: 100%; width: 100%; z-index: 0">
            <main-topper></main-topper>
            <div class="msg-box">
                <main-lefter></main-lefter>
                <div class="msg">
                    <router-view v-slot="{ Component }">
                        <keep-alive>
                            <component :is="Component"/>
                        </keep-alive>
                    </router-view>
                </div>
            </div>
        </div>
        <player-box style="z-index: 1"></player-box>
    </div>
</template>

<script>
import mainLefter from "../../main/mainLefter.vue";
import mainTopper from "../../main/mainTopper.vue";
import playerBox from "./playerBox.vue";
export default {
    name: "mainMsg",
    components:{
        mainTopper,
        mainLefter,
        playerBox
    }
}
</script>

<style scoped>
.main-msg-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.msg-box {
    display: flex;
    width: 100%;
    height: calc(100% - 60px);
}

.msg {
    width: calc(100% - 300px);
    height: 100%;
    background-color: white;
}
</style>